<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        body{background: #eeeeee;}
        .header{width: 100%;height: 1rem;background: #ffffff;text-align: center;position: relative;border-bottom: 1px solid #eeeeee;}
        .header .title{height: 1rem;line-height: 1rem;color: #2f2f2f;}
        .header .back{width: 0.2rem;height: 0.38rem;position: absolute;top: 0.31rem;left: 0.25rem;}
        ul{width:100%;}
        ul li{width:100%;box-sizing:border-box;list-style:none;padding:0.3rem;font-size:0.32rem;color:#333333;margin-bottom: 0.15rem;background:#ffffff}
        ul li .top{display:flex;}
        ul li .middle{line-height: 0.36rem;margin-top:0.2rem;margin-bottom: 0.2rem}
        ul li .bottom{ position: relative; line-height: 0.6rem;display: flex}
        ul li .bottom .edit{margin-right: 0.7rem}
        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        label {
            position: absolute;
            left: 0;
            top: 6px;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            border: 1px solid #999;
        }

        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        input:checked+label {
            background-color: #fe6d32;
            border: 1px solid #fe6d32;
        }

        input:checked+label::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 10px;
            top: 1px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg)
        }
        .addre{margin-left:0.06rem}
        .pic{width:0.3rem;height:0.3rem;vertical-align: middle}
        .footer{width: 100%;height: 1.3rem;background: #ffffff;position: fixed;left: 0;bottom: 0;text-align: center;line-height: 1.3rem;box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.1);}
        .btn{
            width: 6.5rem;
            height: 0.88rem;
            border: none;
            outline: none;
            border-radius: 0.2rem;
            font-size: 0.32rem;
            color: #ffffff;
            background: -webkit-linear-gradient(left, #ffa04d , #ff683a); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right,  #ffa04d , #ff683a); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right,  #ffa04d , #ff683a); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right,  #ffa04d , #ff683a); /* 标准的语法 */
        }
        .container{display: none;}
        .noaddress{width: 100%;text-align: center;margin-top: 2.3rem}
        .noaddress img{width: 3.6rem;height: 2.12rem}
        .noaddress p{font-size: 0.32rem;color: #999999}
        .add{width: 1.8rem;height: 0.6rem;text-align: center;line-height: 0.6rem;border: 1px solid #e6e6e6;border-radius: 0.3rem;margin: 0.3rem auto;font-size: 0.28rem;color: #666666}
    </style>
    <script>
        (function(designWidth, maxWidth) {
            var doc = document,
                win = window,
                docEl = doc.documentElement,
                remStyle = document.createElement("style"),
                tid;
            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width>maxWidth && (width=maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            refreshRem();
            win.addEventListener("resize", function() {
                clearTimeout(tid)
                tid = setTimeout(refreshRem, 300);
            }, false);
            win.addEventListener("pageshow", function(e) {
                if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);
            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function(e) {
                    doc.body.style.fontSize = "16px";
                }, false);
            }
        })(750, 750);
    </script>
</head>
<body>
<header class="header">
    <img class="back" src="images/back.png" alt="">
    <p class="title">收货地址</p>
</header>

<ul>
    <!--<li>-->
        <!--<div class="top">-->
            <!--<div class="name">李莉莉</div>-->
            <!--<div style="flex: 1"></div>-->
            <!--<div class="mobile">125***4678</div>-->
        <!--</div>-->
        <!--<div class="middle">湖北省武汉市洪山区中北路23451号平安国际金融大厦旁荣荣副食</div>-->
        <!--<div class="bottom">-->
            <!--<input id="item1" type="radio" name="item" checked>-->
            <!--<label for="item1"></label>-->
            <!--<span class="addre">默认地址</span>-->
            <!--<div style="flex: 1"></div>-->
            <!--<div class="edit">-->
                <!--<img class="pic" src="images/edit.png" alt="">-->
                <!--<span>编辑</span>-->
            <!--</div>-->
            <!--<div class="delete">-->
                <!--<img class="pic" src="images/delete.png" alt="">-->
                <!--<span>删除</span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</li>-->
</ul>

<div class="container">
        <div class="noaddress">
            <img src="images/noaddress.png" alt="">
            <p>您还没有收货地址哦~</p>
        </div>
        <div class="add">新建地址</div>
</div>

<footer class="footer">
    <button class="btn">新增地址</button>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
      customer_id = localStorage.getItem("customer_id");
function flesh() {
   
    $.ajax({
        url:"http://192.168.1.44/shop/Shop/address",
        type:"get",
        data:{customer_id:customer_id},
        success:function (res) {
            var data = JSON.parse(res);
            var html = '';
            if(data.data.info==null){
                $("ul").css("display","none");
                $(".footer").css("display","none");
                $(".container").css("display","block");
            }else{
            $.each(data.data.info,function (i, e) {
                    var n = parseInt(e.id);
                    var h;
                    var radio;
                    if(e.type==1){
                        h = '<span class="addre">默认地址</span>';
                        radio = '<input id='+e.id+' type="radio" name="item" checked> ';
                    }else{
                        h = '<span class="addre">设为默认</span>';
                        radio = '<input id='+e.id+' data-id='+n+' type="radio" name="item"> ';
                    }
                    html +=  '<li data-id='+n+'>'
                        +'<div class="top">'
                        +'<div class="name">'+ e.name + '</div>'
                        +'<div style="flex: 1"></div>'
                        +'<div class="mobile">' + e.phone + '</div>'
                        +'</div>'
                        +'<div class="middle">' + e.province + e.city + e.area + '</div>'
                        +'<div class="bottom">'
                        + radio
                        +'<label for='+e.id+' class="set"></label>'
                        + h
                        +'<div style="flex: 1"></div>'
                        +'<div class="edit" data-id='+n+'>'
                        +'<img class="pic" src="images/edit.png" alt="">'
                        +'<span>编辑</span>'
                        +'</div>'
                        +'<div class="delete" data-id='+n+' >'
                        +'<img class="pic" src="images/delete.png" alt="">'
                        +'<span>删除</span>'
                        +'</div>'
                        +'</div>'
                        +'</li>'
                }
            )
            $("ul").html(html);

        }
    }
    })
}
flesh();

//    $(".delete").click(function () {
//        $.ajax({
//            url:"http://192.168.1.44/shop/Shop/addressDel",
//
//        })
//    });

    $(".btn").click(function () {
        window.location.href="addNewAddress.html";
    });

    $("ul").on('click','li',function(){
        window.location.href="CommodityDetailsPage.html?id="+$(this).attr('data-id');
    });

    $("ul").on('click','.delete',function(e){
        e.stopPropagation(); 
        // e.preventDefault(); 
        var addressId = $(this).attr('data-id');
        $.ajax({
            url:"http://192.168.1.44/shop/Shop/addressDel",
            type:"post",
            dataType:"json",
            data:{id:addressId,customer_id:customer_id},
            success:function (res) {
                console.log(res);
                flesh();
            }
        })
    });

    $("ul").on('click','.edit',function(e){
        e.stopPropagation(); 
        // e.preventDefault(); 
        window.location.href="editAddress.html?aid="+$(this).attr('data-id');
    });

    $("ul").on('click','.set',function(e){
        e.stopPropagation(); 
        e.preventDefault(); 
        var id = $(this).prev().attr('data-id');
        $.ajax({
            url:"http://192.168.1.44/shop/Shop/addressEdit",
            type:"post",
            data:{customer_id:customer_id,id:id,type:1},
            success:function (res) {
                console.log(res);
                flesh();
            }
        })
    });



//$(':radio').click(function () {
//    $.each($(':radio'), function () {
//        $(this).removeAttr('checked');
//    });
//    $(this).prop('checked', 'checked');
//})


    $(".add").click(function () {
        window.location.href="addNewAddress.html";
    })

    $(".back").click(function () {
        window.history.back();
    })

</script>

</body>
</html>